<template>
  <page-wrap :show-top="showTop" hide-tab :bg-color="dynamicColor" :title="dynamicTitle" back
    :customWrapStyle="customWrapStyle">
    <view class="resumeAssessmentWrap" :style="'padding-top:' + navHeight + 'px;height:cal(100vh)'"
      @click.stop.native="handlePageClick">
      <view class="page-content" v-if="enterFrameInfo.isAnimationEnd">
        <view class="top-part">
          <!-- 诊断信息 -->
          <view class="assessment-info">
            <view class="score-container">
              <view class="score-tip">
                <view class="bot-image" />
                {{ resumeOpinion.score ? '当前诊断分数' : '暂未进行诊断' }}
              </view>
              <view class="score-content">
                <view class="score-num">
                  <text class="score">{{ resumeOpinion.score || '' }}</text>
                  <text class="score-word">{{
                    resumeOpinion.score ? '分' : ''
                  }}</text>
                </view>
                <view class="finish-percent" v-if="resumeOpinion.resumeComplete">简历完善度
                  {{ resumeOpinion.resumeComplete || '-' }}%</view>
              </view>
            </view>
            <view class="assessment-result" v-show="resumeOpinion.opinionLevel">
              <view class="assessment-result-item">
                <view class="result-title">
                  {{ resumeOpinion.opinionLevel ? '简历等级评估' : '' }}
                </view>
                <view class="result-content">
                  <view class="yellow-dot" v-if="resumeOpinion.opinionLevel"></view>
                  {{ resumeOpinion.opinionLevel || '' }}
                </view>
              </view>
              <view class="assessment-result-item">
                <view class="result-title">能力匹配度</view>
                <view class="result-content">
                  <text class="match-num mr16" v-if="Number.isFinite(abilityScore)">{{ abilityScore }}%</text>
                  <text class="match-text">{{ abilityScoreText }}</text>
                </view>
              </view>
            </view>
          </view>
          <!-- 仪表盘 -->
          <view class="guage">
            <view class="pointer"></view>
            <view :class="{ circle: true, showUp: enterFrameInfo.isAnimationEnd }">
              <view class="topNumber circleText" v-if="resumeOpinion.score">{{
                resumeOpinion.score + 20 >= 100
                  ? '100'
                  : resumeOpinion.score + 20
              }}</view>
              <view class="centerNumber circleText">
                <text>{{ resumeOpinion.score }}</text>
                <text v-if="resumeOpinion.list && resumeOpinion.list.length != 0">待优化</text>
              </view>
              <view class="bottomNumber circleText" v-if="resumeOpinion.score">{{
                  resumeOpinion.score - 20 <= 0 ? '0' : resumeOpinion.score - 20
                }}</view>
              <view v-for="degree in degrees" :key="degree" class="tick" :style="{
                  transform:
                    'rotate(' + degree * 3 + 'deg) translateY(-230rpx)',
                }"></view>
            </view>
          </view>
        </view>
        <view class="bottom-part">
          <view class="popup-from-bottom">
            <view class="popup-tab">
              <u-tabs :current="currentIndex" name="name" :list="tabList" height="88"
                :active-item-style="activeItemStyle" :gutter="24" :bar-style="barStyle" font-size="28"
                :inactive-color="'#999999'" @change="handleTabChange"></u-tabs>
            </view>
            <view v-show="currentIndex === 0" scroll-y="true" class="suggest-card-list">
              <template v-if="resumeOpinion.list && resumeOpinion.list.length">
                <view class="suggest-card-item" v-for="(item, index) in resumeOpinion.list" :key="index">
                  <view class="suggest-card-item-title" @click="switchExpand(item)">
                    <view class="suggest-card-item-title-left">
                      <view class="suggest-card-item-name">{{
                        item.resumeModuleName
                      }}</view>
                      <view class="suggest-card-item-dot">·</view>
                      <view class="suggest-card-item-count">{{ item.opinionNum }}项</view>
                    </view>
                    <view class="suggest-card-item-switch" v-show="item.expand">
                      <img :src="recentMoreArrowUp" alt="" />
                    </view>
                    <view class="suggest-card-item-switch" v-show="!item.expand">
                      <img :src="recentMoreArrowDown" alt="" />
                    </view>
                  </view>
                  <view :class="{ 'suggest-child-list': true, expand: item.expand }">
                    <view class="suggest-child-item" v-for="(_item, _index) in item.formatAdviceList" :key="_index"
                      @click="handleOpinionExtraClick(item, _item)">
                      <view class="suggest-child-item-title">
                        <view class="suggest-child-item-name" v-if="_item.adviceTitle">{{ _item.adviceTitle || '' }}
                        </view>
                        <view class="suggest-child-item-content" v-for="(thirdItem, thirdIndex) in _item.subList"
                          :key="thirdIndex">
                          {{ thirdItem.advice }}
                          <img :src="adviceEntrance" alt="" class="advice-entrance" />
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
              <view v-else>
                <view style="height: 450rpx">
                  <Empty :baseImg="emptyImg" text="暂无优化项~" :fontWeight="400" class="empty" />
                </view>
              </view>
            </view>
            <view v-show="currentIndex === 1" scroll-y="true" class="analysis-card-list">
              <!-- 建立完善度过低，无结果 -->
              <template v-if="!showAbilityResult">
                <view class="test-tip">
                  <image :src="noData" class="data-img"></image>
                  <view class="tip-text">
                    <text v-if="
                        !myTendedCompleteness ||
                        !personWorkCompleteness ||
                        !personEdusCompleteness
                      ">请完善在线简历的</text>
                    <text v-if="!myTendedCompleteness">【求职意向】</text>
                    <text v-if="!personWorkCompleteness">【工作经历】</text>
                    <text v-if="!personEdusCompleteness">【教育背景】</text>
                    <text v-if="
                        (!myTendedCompleteness ||
                          !personWorkCompleteness ||
                          !personEdusCompleteness) &&
                        !resumeFinishedPercent
                      ">，且</text>
                    <text v-if="!resumeFinishedPercent">完善度必须高于50%</text>
                  </view>
                  <view class="test-btn mt44" v-if="fromWhere != 'careerPathManage'" @click="handleRefineResume">去完善简历 >
                  </view>
                </view>
              </template>
              <template v-else>
                <!-- 没有开始过或者无结果状态 -->
                <view class="test-tip" v-if="neverDiagnose">
                  <image :src="dataTest" class="data-img"></image>
                  <text class="tip-text mb44">根据就业意向，帮助你快速找到自己的优势亮点</text>
                  <view class="test-btn" @click="capacityDiagnoseFn">能力分析 >
                  </view>
                </view>
                <!-- 正在分析 -->
                <view class="test-tip" v-else-if="isDiagnosing">
                  <image :src="diagnosingImg" class="data-img"></image>
                  <text class="tip-text mb44">正在分析评定中，请稍后~</text>
                </view>
                <!-- 分析出错或者超时 -->
                <view class="test-tip" v-else-if="isFailed">
                  <image :src="diagnoseFailImg" class="data-img"></image>
                  <text class="tip-text mb44">评定分析超时或异常，您可以重新评定~</text>
                  <view class="test-btn" @click="capacityDiagnoseFn">重新分析 >
                  </view>
                </view>
                <!-- 已经检测过，有结果 -->
                <view v-else>
                  <view class="title">
                    与
                    <text class="title-spe">{{
                      selectInfo.position || ''
                    }}</text>
                    岗位的匹配程度
                  </view>
                  <view class="match-container">
                    <view class="match-num">{{ abilityScore }}</view>
                    <view class="percent-icon">%</view>
                    <view :class="['match-text', abilityScoreClassName]">{{
                      abilityScoreText || '-'
                    }}</view>
                  </view>
                  <view class="match-tips">能力匹配是HR评估候选人的是否符合岗位要求的依据</view>
                  <view class="card">
                    <view class="header">
                      <view class="title">教育背景</view>
                      <view :class="['match-text', getEduBgLevel().className]">{{ getEduBgLevel().label }}</view>
                    </view>
                    <view class="info">
                      <view class="info-content">
                        {{ selectInfo.major || '暂无' }}
                      </view>
                    </view>
                  </view>
                  <view class="card">
                    <view class="header">
                      <view class="title">职业素质</view>
                      <view :class="[
                          'match-text',
                          getQualityAnalysisLevel().className,
                        ]">{{ getQualityAnalysisLevel().label }}</view>
                    </view>
                    <view class="info">
                      <view class="info-item">
                        <view class="info-item-header">
                          <view class="round"></view>
                          <view class="title">知识体系优势</view>
                        </view>
                        <view class="info-item-content">
                          {{ abilityResult.knowledgeAnalysis || '暂无' }}
                        </view>
                      </view>
                      <view class="info-item">
                        <view class="info-item-header">
                          <view class="round"></view>
                          <view class="title">通用素质优势</view>
                        </view>
                        <view class="info-item-content">
                          {{ abilityResult.qualityAnalysis || '暂无' }}
                        </view>
                      </view>
                      <view class="info-item">
                        <view class="info-item-header">
                          <view class="round"></view>
                          <view class="title">专业能力优势</view>
                        </view>
                        <view class="info-item-content">
                          {{ abilityResult.majorAnalysis || '暂无' }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="card">
                    <view class="header">
                      <view class="title">工作经历</view>
                      <view :class="['match-text', getWorkMatchLevel().className]">{{ getWorkMatchLevel().label }}
                      </view>
                    </view>
                    <view class="info">
                      <view class="info-content">
                        {{ abilityResult.workMatch || '暂无' }}
                      </view>
                    </view>
                  </view>
                  <view class="card">
                    <view class="header">
                      <view class="title">技能优势</view>
                      <view :class="['match-text', getSpecialityLevel().className]">{{ getSpecialityLevel().label }}
                      </view>
                    </view>
                    <view class="info">
                      <view class="info-content">
                        {{ abilityResult.speciality || '暂无' }}
                      </view>
                    </view>
                  </view>
                  <view class="footer">
                    <view v-if="showReturnBtn" :class="['btn-half']" @click="handleReturn">返回首页
                    </view>
                    <!-- 如果是来自职途运营中台，那么这个按钮不用展示，因为是老师看学生的诊断结果 -->
                    <view :class="[
                        showReturnBtn ? 'btn-half' : 'btn',
                        'active',
                        'ml-14',
                      ]" v-if="fromWhere != 'careerPathManage'" @click="handleGoBackSelect">更新能力分析
                    </view>
                  </view>
                </view>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 序列帧容器 -->
    <view class="animation-image" v-if="!enterFrameInfo.isAnimationEnd" />
    <!-- 如果是来自职途运营中台，那么这个按钮不用展示，因为是老师看学生的诊断结果 -->
    <template v-if="fromWhere != 'careerPathManage'">
      <view class="resumeAssessmentEntrance" @click="toResumeAssessment"
        v-if="enterFrameInfo.isAnimationEnd && fromSxh != 'sxh'">
        <view alt="" class="botIcon" />
        简历解惑
        <img :src="resumeAssessmentEntranceIcon" alt="" class="resumeAssessmentEntranceIcon" />
      </view>

      <view class="rightFixedButton" @click="toEnclosure" v-if="
          enterFrameInfo.isAnimationEnd &&
          currentIndex === 0 &&
          fromSxh != 'sxh'
        ">
        上传简历诊断
        <img :src="resumeAssessmentEntranceIcon" alt="" class="resumeAssessmentEntranceIcon" />
      </view>
    </template>
    <view class="fixedButtons" v-if="fromSxh == 'sxh' && enterFrameInfo.isAnimationEnd">
      <view class="return-sxh-home" @click="returnSxhHome">返回首页</view>
    </view>
    <!-- 预加载所有图片，防止序列帧闪动 -->
    <view class="preloadImages" style="display: none">
      <image :src="`https://img3.job1001.com/ypMp/elan/images/resume/enterBotFramesSprites.png`" />
    </view>
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import ShareMixin from "@/mixins/share";
import {
  getResumeOpinion,
  addBuryingPoint,
  getCapByPersonId,
  capacityDiagnose,
  cardRegist,
  getUserInfo,
  getResumeData,
  getProductGroup,
} from "@/api/modules/career";
import { env } from "@/api/root";
import Empty from "@/components/Empty.vue";
import LoginDialog from "@/components/LoginDialog";
export default {
  mixins: [ShareMixin],
  name: "resumeAssessment",
  components: {
    Empty,
    LoginDialog,
  },
  data() {
    //resumeModule简历模块
    //1:基本信息 2:求职状态 3:求职意向 4:工作经历 5:项目经验 6：自我评价 7：教育背景
    //8：个人证书 9：技能特长 10：培训经历 11：校园经历 12：奖项荣誉
    const resumeModuleRoutes = {
      1: "/pagesSub/newResume/basic/index",
      2: "/pagesSub/newResume/objective/index",
      3: "/pagesSub/newResume/aimItem/index",
      4: "/pagesSub/newResume/experience/index",
      5: "/pagesSub/newResume/project/index",
      6: "/pagesSub/newResume/generalTextAreaPage/index?type=eval",
      7: "/pagesSub/newResume/education/index",
      8: "/pagesSub/newResume/certificate/index",
      9: "/pagesSub/newResume/generalTextAreaPage/index?type=skill",
      10: "/pagesSub/newResume/train/index",
      11: "/pagesSub/newResume/schoolExp/index",
      12: "/pagesSub/newResume/reward/index",
    };
    return {
      productSign: "",
      isResumeComplete: false,
      resumeModuleRoutes,
      resumeAssessmentEntranceIcon:
        this.$imgBase + "resume/resumeAssessmentEntranceIcon.svg?v=1",
      recentMoreArrowUp: this.$imgBaseSelf + "common/recentMoreArrowUp.png",
      recentMoreArrowDown: this.$imgBaseSelf + "common/recentMoreArrowDown.png",
      adviceEntrance: this.$imgBaseSelf + "resume/adviceEntrance.svg",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      imageUrl: "", //分享图,要在初始化完毕之后再赋值一次，而且必须写https
      dataTest: this.$imgBaseSelf + "resume/data_test_resume.png",
      noData: this.$imgBaseSelf + "resume/no_data_resume.png",
      diagnoseFailImg: this.$imgBaseSelf + "resume/diagnose_fail.png",
      diagnosingImg: this.$imgBaseSelf + "resume/diagnosing.png",
      sharePath: "/pagesSub/newResume/resumeAssessment/index",
      shareTitle: "AI简历诊断，快速解析定位简历问题点",
      navHeight: getApp().globalData.navHeight,
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      tabList: [{ name: "修改意见" }, { name: "能力匹配分析" }],
      resumeOpinion: {},
      currentIndex: 0,
      startY: 0, // 手指触摸起始y坐标
      endY: 0, // 手指触摸结束y坐标
      popupHeight: "53vh", // 弹窗高度
      popupContentHeight: "calc(100vh - 238rpx)",
      showTop: false,
      dynamicTitle: "",
      dynamicColor: "transparent",
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      barStyle: {
        width: "20px",
        height: "8px",
        background:
          "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)",
        "border-radius": "4px",
        left: "0",
        bottom: "12rpx",
      },
      customWrapStyle: {
        overflow: "hidden",
      },
      degrees: Array.from({ length: 120 }, (_, i) => i), // 刻度总数
      //进入时序列帧用的
      enterFrameInfo: {
        isAnimationEnd: false, //动画结束标识，也可以直接设置为True用来跳过动画
      },
      neverDiagnose: false,
      isDiagnosing: false,
      needToSelectParams: false,
      isFailed: false,
      showAbilityResult: false,
      canDiagnose: false,
      abilityResult: {},
      selectInfo: { major: "" },
      abilityScore: "",
      abilityScoreText: "暂无",
      abilityScoreClassName: "unknown",
      diagnosisParams: {},
      timer: null,
      retryCount: 0,
      MAX_RETRY_TIMES: 20,
      hasAnalysis: false,
      target: "",
      resumeFinishedPercent: false,
      jobStatusCompleteness: false,
      myTendedCompleteness: false,
      personEdusCompleteness: false,
      personWorkCompleteness: false,
      showReturnBtn: false,
      fromSxh: "",
      fromWhere: "",
    };
  },
  onPageScroll(e) {
    //滚动改变颜色
    this.showTop = e.scrollTop >= 60;
    if (this.showTop) {
      this.dynamicTitle = this.resumeOpinion.score
        ? "简历评分" + this.resumeOpinion.score + "分"
        : "简历诊断";
      this.dynamicColor = "#ffffff";
    } else {
      this.dynamicTitle = "";
      this.dynamicColor = "transparent";
    }
  },
  created() {},
  onShow() {
    // this.personId = uni.getStorageSync('person-id').slice(2) || undefined;
    if (this.personId) {
      this.getResumeData(true);
      this.handleGetAnalysisResult();
    }
    const resumeUpdated = uni.getStorageSync("resumeUpdated");
    if (resumeUpdated) {
      this.getResumeOpinion();
      uni.removeStorageSync("resumeUpdated");
    }
  },
  onLoad(opt) {
    this.imageUrl =
      "https://img3.job1001.com/ypMp/elan/images/career/AIResumeDiagnoseResultShare_cover.png";

    this.target = opt.target || "";
    this.fromSxh = opt.fromSxh || "";
    this.fromWhere = opt.fromWhere || "";
    // 如果是来自职途运营中台，那么personId就是传过来的personId因为是老师看学生的诊断结果
    if (this.fromWhere == "careerPathManage") {
      this.personId = opt.personId;
    }

    setTimeout(() => {
      this.enterFrameInfo.isAnimationEnd = true;
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
    }, 3600);
    if (this.fromSxh == "sxh" && this.fromSxh == "fromSxhQrCode") {
      this.showReturnBtn = true;
    }
    this.getResumeData(true);
    this.getResumeOpinion();
    this.getProductGroup();
    this.addBuryingPointFn(50026);
  },
  methods: {
    async cardRegistFn() {
      const params = {
        personId: this.personId,
      };
      if (env == "test") {
        params.cardType = 54;
      } else if (env == "pro") {
        params.cardType = 28;
      }
      const res = await cardRegist(params);
      return res;
    },
    async getUserInfoFn() {
      uni.showLoading({ title: "" });
      // 这个uid一定要传，因为在interceptors中，没有传参的请求的请求头不会带上uid，而这个请求一定要uid
      const res = await getUserInfo({ uid: "" });
      if (res.code == 200) {
        //如果没有cardType就绑定一个q2c端的
        if (res.data && !res.data.cardType) {
          const registerRes = await this.cardRegistFn();
          uni.hideLoading();
          if (registerRes.code !== 200) {
            uni.showToast({
              title: registerRes.status_desc,
              icon: "none",
            });
          } else if (registerRes.code == 200) {
            const infoRes = await getUserInfo({ uid: "" });
            if (infoRes.code == 200) {
              uni.setStorageSync("personName", infoRes.data.personName);
              uni.setStorageSync("cardType", infoRes.data.cardType);
            }
          }
        } else {
          uni.setStorageSync("personName", res.data.personName);
          uni.setStorageSync("cardType", res.data.cardType);
        }
      }
    },
    returnSxhHome() {
      uni.reLaunch({ url: "/pagesSub/doubleChannelChoosingMeeting/index" });
    },
    getEduBgLevel() {
      const value = this.abilityResult.bgMatch;
      if (value >= 0 && value <= 4) {
        return { label: "匹配差", className: "danger" };
      } else if (value > 4 && value <= 12) {
        return { label: "弱匹配", className: "normal" };
      } else if (value > 12) {
        return { label: "非常匹配", className: "success" };
      } else {
        return { label: "未知", className: "unknown" };
      }
    },
    getQualityAnalysisLevel() {
      const {
        knowledgeAnalysisScore, // 最高5
        qualityAnalysisScore, // 最高15
        majorAnalysisScore, // 最高15
      } = this.abilityResult;
      const value =
        knowledgeAnalysisScore + qualityAnalysisScore + majorAnalysisScore;
      if (value >= 0 && value <= 9) {
        return { label: "匹配差", className: "danger" };
      } else if (value > 9 && value <= 14) {
        return { label: "弱匹配", className: "warn" };
      } else if (value > 14 && value <= 24) {
        return { label: "较匹配", className: "normal" };
      } else if (value > 24) {
        return { label: "非常匹配", className: "success" };
      } else {
        return { label: "未知", className: "unknown" };
      }
    },
    getWorkMatchLevel() {
      const value = this.abilityResult.workMatchScore;
      if (value >= 0 && value <= 5) {
        return { label: "匹配差", className: "danger" };
      } else if (value > 5 && value <= 20) {
        return { label: "弱匹配", className: "warn" };
      } else if (value > 20 && value <= 33) {
        return { label: "较匹配", className: "normal" };
      } else if (value > 33) {
        return { label: "非常匹配", className: "success" };
      } else {
        return { label: "未知", className: "unknown" };
      }
    },
    getSpecialityLevel() {
      const value = this.abilityResult.specialityScore;
      if (value == 0) {
        return { label: "匹配差", className: "danger" };
      } else if (value > 0 && value <= 5) {
        return { label: "弱匹配", className: "warn" };
      } else if (value > 5 && value <= 11) {
        return { label: "较匹配", className: "normal" };
      } else if (value > 11) {
        return { label: "非常匹配", className: "success" };
      } else {
        return { label: "未知", className: "unknown" };
      }
    },
    getAbilityScoreText(value) {
      if (value >= 0 && value <= 30) {
        return { label: "匹配差", className: "danger" };
      } else if (value > 30 && value <= 60) {
        return { label: "弱匹配", className: "warn" };
      } else if (value > 60 && value <= 75) {
        return { label: "较匹配", className: "normal" };
      } else if (value > 75) {
        return { label: "非常匹配", className: "success" };
      } else {
        return { label: "暂无", className: "unknown" };
      }
    },
    handleGetAnalysisResult() {
      this.diagnosisParams = uni.getStorageSync("diagnosisParams")
        ? JSON.parse(uni.getStorageSync("diagnosisParams"))
        : {};
      if (Object.keys(this.diagnosisParams).length <= 0) {
        this.needToSelectParams = true;
      }
      this.startRequest();
    },
    async capacityResultFn() {
      this.isFailed = false;
      const params = {
        personId: this.personId,
      };
      try {
        const res = await getCapByPersonId(params);
        if (res.code == 200) {
          const { diagnoseStatus } = res.data;
          if (diagnoseStatus == -1) {
            // 从来没有诊断过
            this.neverDiagnose = true;
            this.endRequest();
          } else if (diagnoseStatus == 0) {
            this.isFailed = true;
            this.endRequest();
            uni.showToast({
              title: "能力分析超时，请重试",
              icon: "none",
              duration: 1500,
            });
          } else if (diagnoseStatus == 1) {
            this.neverDiagnose = false;
            this.isDiagnosing = true;
            // uni.showLoading({ title: '能力分析中...', mask: true });
          } else if (diagnoseStatus == 2) {
            this.abilityResult = JSON.parse(res.data.content);
            this.selectInfo = JSON.parse(res.data.info);
            this.abilityScore = res.data.score;
            this.abilityScoreText = this.getAbilityScoreText(
              this.abilityScore
            ).label;
            this.abilityScoreClassName = this.getAbilityScoreText(
              this.abilityScore
            ).className;
            if (Object.keys(this.abilityResult).length > 0) {
              this.isFailed = false;
              this.hasAnalysis = true;
              this.endRequest();
            } else {
              this.isFailed = true;
              this.endRequest();
              uni.showToast({
                title: "能力分析异常，请重试",
                icon: "none",
                duration: 1500,
              });
            }
          } else if (diagnoseStatus == 3) {
            this.isFailed = true;
            this.endRequest();
            uni.showToast({
              title: "能力分析异常，请重试",
              icon: "none",
              duration: 1500,
            });
          }
        } else {
          this.isFailed = true;
          this.endRequest();
          uni.showToast({
            title: res.status_desc,
            icon: "none",
            duration: 1500,
          });
        }
      } catch (err) {
        this.isFailed = true;
        this.endRequest();
        uni.showToast({
          title: err.message,
          icon: "none",
          duration: 1500,
        });
      }

      // 每次尝试后增加重试计数
      this.retryCount++;

      // 如果超过最大重试次数且仍然未解析完成
      if (!this.hasAnalysis && this.retryCount >= this.MAX_RETRY_TIMES) {
        uni.showToast({
          title: "超过最大重试次数，请重试",
          icon: "none",
          duration: 1500,
        });
        this.isFailed = true;
        this.endRequest();
      }
    },
    async capacityDiagnoseFn() {
      // 如果本地存储没有参数，则先跳到首页选择参数
      if (this.needToSelectParams) {
        this.handleGoBackSelect();
        return;
      }
      this.neverDiagnose = false;
      this.isDiagnosing = true;
      const openId = uni.getStorageSync("openId");
      const params = {
        openId: openId,
        personId: this.personId,
        position: this.diagnosisParams.wantJobParams.position,
        intendedId: this.diagnosisParams.wantJobParams.intendedId,
        major: this.diagnosisParams.majorParams.major,
        runReport: "0", // "1" 生成报告  '0' 不生产报告
      };
      // uni.showLoading({ title: '能力分析中...', mask: true });
      const res = await capacityDiagnose(params);
      if (res.code == 200) {
        setTimeout(() => {
          this.startRequest();
        }, 15000);
      } else {
        this.isFailed = true;
        uni.showToast({
          title: res.status_desc,
          icon: "none",
          duration: 1500,
        });
      }
    },
    startRequest() {
      this.timer = setInterval(() => {
        if (this.retryCount < this.MAX_RETRY_TIMES) {
          this.capacityResultFn();
        } else {
          clearInterval(this.timer);
        }
      }, 5000);
    },
    endRequest() {
      clearInterval(this.timer);
      this.isDiagnosing = false;
      this.hasAnalysis = false;
      this.retryCount = 0;
      this.timer = null;
    },
    handleReturn() {
      uni.navigateTo({ url: "/pagesSub/userCenter/careerPathV2/index" });
    },
    handleGoBackSelect() {
      if (this.target == "AIResumeDiagnoseNew") {
        uni.navigateTo({ url: "/pagesSub/AIResumeDiagnoseNew/index" });
      } else {
        uni.navigateBack();
      }
    },
    handleRefineResume() {
      this.currentIndex = 0;
    },
    handleTabChange(index) {
      this.currentIndex = index;
    },
    //普通的埋点
    async addBuryingPointFn(etId) {
      if (!this.personId) return;
      const params = {
        etId: etId,
        personId: uni.getStorageSync("person-id").slice(2) || "",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
      };
      const res = await addBuryingPoint(params);
    },
    async getProductGroup() {
      const params = {
        personId: this.personId,
        id: "1",
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.productSign = res.data[0].productSign;
      }
    },
    handlePageClick() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
    },
    toEnclosure() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      this.addBuryingPointFn(20009);
      uni.navigateTo({
        url: `/pagesSub/userCenter/enclosure/index`,
      });
    },
    //检查简历完整性
    checkResumeCompleteness(resumeData) {
      //求职状态
      this.jobStatusCompleteness = !!resumeData.person_status;
      //求职意向
      this.myTendedCompleteness = !!(
        resumeData.myTended && resumeData.myTended.length != 0
      );
      //工作经历
      this.personWorkCompleteness = !!(
        resumeData.personWorkArr && resumeData.personWorkArr.length != 0
      );
      //教育背景
      this.personEdusCompleteness = !!(
        resumeData.personEdusArr && resumeData.personEdusArr.length != 0
      );
      this.isResumeComplete = !!(
        this.jobStatusCompleteness &&
        this.myTendedCompleteness &&
        this.personWorkCompleteness &&
        this.personEdusCompleteness
      );
    },
    async loginSuccessBack() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.getResumeData(true);
      this.getResumeOpinion();
      await this.getUserInfoFn();
      this.handleGetAnalysisResult();
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    toResumeAssessment() {
      if (!this.personId) {
        this.showLoginDialog();
        return;
      }
      wx.reportEvent("resume_assesment_consultant_buy", {});
      this.addBuryingPointFn(20029);
      switch (this.productSign) {
        case "ZHITU_WUHAN_SERVICE":
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage`,
          });
          break;
        case "ZHITU_TOC_SERVICE":
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?etId=20029`,
          });
          break;
        default:
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/CBuyPage`,
          });
          break;
      }
    },
    //底部容器滑动

    changePopupHeight() {
      if (this.popupHeight === "140rpx") {
        this.popupHeight = "81vh";
      } else {
        this.popupHeight = "140rpx";
      }
    },
    handleTouchMove(event) {
      const touch = event.changedTouches[0] || {};
      this.popupHeight = (1000 - touch.clientY) / 10 + "vh";
      let currentHeight = (1000 - touch.clientY) / 10;
    },
    handleTouchStart(event) {
      this.startY = event.changedTouches[0].clientY; // 获取手指按下位置的y坐标
    },
    handleTouchEnd(event) {
      this.endY = event.changedTouches[0].clientY; // 获取手指最后一次触摸位置的y坐标
      if (this.endY - this.startY < 0) {
        // 终点坐标-起点坐标<0上划
        this.popupHeight = "90vh";
        this.popupContentHeight = "calc(100vh - 238rpx)";
        // this.showShortCard = true;
      } else if (this.endY - this.startY > 0) {
        // 终点坐标-起点坐标>0下划
        this.popupHeight = "53vh";
        this.popupContentHeight = "calc(100vh - 238rpx)";
      }
    },
    //刷新简历,异步处理返回一个promise
    getResumeData() {
      return new Promise((resolve, reject) => {
        let param = {
          personId: this.personId,
          conditionArr: JSON.stringify({
            is_mp: 1,
          }),
        };
        getResumeData(param)
          .then((res) => {
            if (res.code == 200 && Object.keys(res.data).length > 0) {
              getApp().globalData.resumeInfo = res.data;
              //拿到后判断用户是否都填了必填项
              this.checkResumeCompleteness(res.data);
              resolve(true);
            } else {
              reject(false);
            }
          })
          .catch((err) => {
            reject(false);
          });
      });
    },
    //点击跳转的函数
    async handleOpinionExtraClick(item, _item) {
      // 如果是老师查看学生的简历诊断结果，不允许跳转
      if (this.fromWhere == "careerPathManage") {
        return;
      }
      let url = this.resumeModuleRoutes[item.resumeModule];
      if (url && _item.adviceParamIdField && _item.adviceParamId) {
        url = url + `?${_item.adviceParamIdField}=${_item.adviceParamId}`;
      }
      const isResumeUpdated = await this.getResumeData();
      if (isResumeUpdated) {
        uni.navigateTo({
          url,
        });
      } else {
        uni.showToast({
          icon: "none",
          title: "获取最新简历信息失败,请重试",
          duration: 1000,
        });
      }
    },
    getResumeOpinion() {
      const params = {
        personId: this.personId,
      };
      if (this.enterFrameInfo.isAnimationEnd) {
        uni.showLoading({
          title: "加载中",
        });
      }
      setTimeout(() => {
        getResumeOpinion(params)
          .then((res) => {
            if (
              res.code == 200 &&
              res.data.list &&
              Array.isArray(res.data.list) &&
              res.data.list.length
            ) {
              this.resumeOpinion = res.data;
              this.resumeOpinion.list.map((item) => {
                this.$set(item, "expand", true);
              });
            }
            this.resumeOpinion.resumeComplete &&
              this.computedShowAbilityResult();
          })
          .catch((e) => {
            console.log(e);
          })
          .finally(() => {
            uni.hideLoading();
          });
      }, 2300);
    },
    async computedShowAbilityResult() {
      const isNumber = typeof this.resumeOpinion.resumeComplete;
      if (isNumber != "null" || isNumber != "undefined") {
        this.resumeFinishedPercent =
          +this.resumeOpinion.resumeComplete >= 50 ? true : false;
      } else {
        this.resumeFinishedPercent = false;
      }
      await this.getResumeData();
      this.canDiagnose = !!(
        this.myTendedCompleteness &&
        this.personWorkCompleteness &&
        this.personEdusCompleteness
      );
      if (!this.resumeFinishedPercent || !this.canDiagnose) {
        this.showAbilityResult = false;
      } else {
        this.showAbilityResult = true;
      }
    },
    switchExpand(item) {
      item.expand = !item.expand;
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-resume: $img-base + "resume/";

@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}

@font-face {
  font-family: "D-DIN-PRO-500-Medium";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-500-Medium.otf");
}

@keyframes circleShowUp {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }

  30% {
    opacity: 1;
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-370deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes circleTextShowUp {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.resumeAssessmentWrap {
  width: 100vw;
  min-height: 100vh;
  background-image: url($img-base + "resume/resumeAssessmentBG.png?v=1");
  background-size: 100% auto;
  background-repeat: no-repeat;
  overflow: hidden;

  // background-color: #fff5ea;
  .page-content {
    .top-part {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      margin-top: 16rpx;
      padding-left: 44rpx;

      .assessment-info {
        .score-container {
          display: flex;
          flex-direction: column;

          .score-tip {
            display: flex;
            align-items: center;
            position: relative;
            width: 294rpx;
            padding: 10rpx 0;
            background: linear-gradient(180deg, #5e70fc 0%, #448afc 100%);
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32rpx;
            color: #ffffff;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            border-radius: 8rpx;
            padding-left: 10rpx;

            &::after {
              content: "";
              position: absolute;
              bottom: -34rpx;
              left: 17rpx;
              width: 0rpx;
              height: 0rpx;
              border: 20rpx solid transparent;
              border-top: 20rpx solid #448afc;
            }

            @keyframes resultBotFramesSprites {
              0% {
                background-position: -10px -10rpx;
              }

              12% {
                background-position: -1055px -10rpx; //第一个参数是网页里的最后一个数字 https://www.toptal.com/developers/css/sprite-generator
              }

              86% {
                background-position: -1055px -10rpx; //保持静止
              }

              100% {
                background-position: -10px -10rpx;
              }
            }

            .bot-image {
              position: relative;
              top: 6rpx;
              width: 70rpx;
              height: 70rpx;
              background-image: url($img-base-resume + "/resultBotFramesSprites_new3.png");
              /* 雪碧图路径 */
              background-position: -10px -10rpx;
              background-size: 1100px auto; //图的长度
              background-repeat: no-repeat;
              animation: resultBotFramesSprites 13s steps(19) forwards infinite;
              margin-top: -10rpx;
            }
          }

          .score-content {
            margin-top: 20rpx;
            font-weight: 800;
            font-size: 104rpx;
            color: #000000;
            display: flex;
            align-items: flex-end;
            .score-num {
              .score {
                font-family: D-DIN-PRO-800-ExtraBold;
                margin-right: 10rpx;
              }
              .score-word {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
                text-align: left;
                font-style: normal;
              }
            }
            .finish-percent {
              font-size: 28rpx;
              color: #333333;
              margin-left: 30rpx;
              line-height: 80rpx;
              font-weight: 400;
            }
          }
        }

        .assessment-result {
          display: flex;
          flex-wrap: nowrap;
          margin-top: 58rpx;

          .assessment-result-item {
            display: flex;
            flex-direction: column;

            &:first-of-type {
              margin-right: 54rpx;
            }

            .result-title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              margin-bottom: 24rpx;
            }

            .result-content {
              display: flex;
              align-items: center;
              background: #e9f1f8;
              border-radius: 8rpx;
              padding: 12rpx 20rpx;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;

              .yellow-dot {
                display: inline-block;
                width: 14rpx;
                height: 14rpx;
                background: #ff863f;
                margin-right: 14rpx;
                border-radius: 50%;
              }

              .yellow-text {
                color: #ff863f;
              }
              .match-num {
                font-size: 28rpx;
                color: #333333;
              }
              .mr16 {
                margin-right: 16rpx;
              }
            }
          }
        }
      }

      .guage {
        position: absolute;
        width: 554rpx;
        height: 554rpx;
        right: -40%;
        border-radius: 50%;
        box-shadow: 0rpx 24rpx 30rpx 0rpx rgba(114, 179, 223, 0.6);

        .pointer {
          position: absolute;
          width: 26rpx;
          height: 26rpx;
          top: 50%;
          left: -6rpx;
          border-radius: 50%;
          background: white;
          z-index: 2;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -50rpx;
            width: 52rpx;
            height: 4rpx;
            /* 刻度的长度 */
            background-color: white;
            transform-origin: center;
          }
        }

        .circle {
          position: relative;
          width: 554rpx;
          height: 554rpx;
          // left: 50rpx;
          background: linear-gradient(
            167deg,
            #7052ff 30%,
            #2ad7ca 75%,
            #90f8bc 100%
          );
          border-radius: 50%;
          mask: radial-gradient(transparent 106rpx, #000 106rpx);
          border: 2rpx solid #defff0;
          opacity: 0;
          border-image: linear-gradient(
              218deg,
              rgba(69, 93, 255, 1),
              rgba(45, 222, 172, 0.5)
            )
            2 2;
          font-family: D-DIN-PRO-500-Medium;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 536rpx;
            height: 536rpx;
            background: transparent;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            border: 2px solid white;
          }

          .tick {
            position: absolute;
            top: 48.5%;
            left: 50%;
            width: 2rpx;
            height: 20rpx;
            /* 刻度的长度 */
            background-color: white;
            transform-origin: center;
          }

          .circleText {
            opacity: 0;
          }

          .topNumber {
            position: absolute;
            left: 30%;
            top: 98rpx;
            display: flex;
            font-size: 28rpx;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
          }

          .centerNumber {
            position: absolute;
            top: 49%;
            left: 81rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 36rpx;
            font-weight: 800;
            color: white;

            & > text:last-of-type {
              font-size: 26rpx;
              letter-spacing: 2rpx;
              margin-top: 4rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 26rpx;
              color: #ffffff;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }

          .bottomNumber {
            position: absolute;
            left: 30%;
            bottom: 108rpx;
            display: flex;
            font-size: 28rpx;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.7);
          }

          &.showUp {
            animation: circleShowUp 3s ease;
            opacity: 1;
            transform: rotate(-360deg);

            .circleText {
              animation: circleTextShowUp 3300ms ease;
              opacity: 1;
            }
          }
        }
      }
    }

    .bottom-part {
      position: relative;
      margin-top: 80rpx;
      z-index: 3;

      .popup-tab {
        margin-left: -24rpx;
        margin-top: -20rpx;
        padding: 0 32rpx;
      }

      .popup-from-bottom {
        width: 100%;
        // position: fixed;
        bottom: 0rpx;
        background: #ffffff;
        box-shadow: 0rpx 4rpx 20rpx 8rpx rgba(0, 5, 64, 0.12);
        border-radius: 28rpx 28rpx 0 0;
        // height: 53vh;
        padding: 32rpx 0 0; //不写在一起是因为用scroll的时候阴影会被覆盖

        .suggest-card-list {
          height: calc(100vh - 340rpx);
          overflow-y: scroll;
          padding: 12rpx 32rpx 80rpx;

          .suggest-card-item {
            background: #ffffff;
            box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(107, 136, 187, 0.3);
            border-radius: 12rpx;
            padding: 28rpx;
            overflow: hidden;
            margin-bottom: 24rpx;
            mix-blend-mode: multiply;

            /* 混合模式，用于防止阴影被裁剪 */
            .suggest-card-item-title {
              display: flex;
              justify-content: space-between;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 34rpx;
              line-height: 48rpx;
              text-align: left;
              font-style: normal;

              .suggest-card-item-title-left {
                display: flex;
              }

              .suggest-card-item-name {
                color: #333333;

                font-size: 36rpx;
              }

              .suggest-card-item-dot {
                color: #ff863f;
                margin: 0 20rpx;
              }

              .suggest-card-item-count {
                color: #ff863f;
              }

              .suggest-card-item-switch {
                img {
                  width: 32rpx;
                  height: 32rpx;
                }
              }
            }

            .suggest-child-list {
              transition: height 1s ease-in-out;
              // 这里是收起来的状态
              height: 0;
              margin-top: 0;
              display: none;

              &.expand {
                height: auto;
                margin-top: 32rpx;
                display: block;
              }

              .suggest-child-item {
                padding: 40rpx 0;
                border-bottom: 2rpx solid #f4f4f4;

                &:first-of-type {
                  padding-top: 0;
                }

                &:last-of-type {
                  border-bottom: 0;
                  padding-bottom: 0;
                }

                .suggest-child-item-name {
                  font-family: PingFang-SC, PingFang-SC;
                  font-weight: bold;
                  font-size: 30rpx;
                  color: #333333;
                  line-height: 42rpx;
                  text-align: left;
                  font-style: normal;
                  margin-bottom: 22rpx;
                }

                .suggest-child-item-content {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #666666;
                  // line-height: 44rpx;
                  text-align: left;
                  font-style: normal;
                  vertical-align: middle;
                  margin-bottom: 40rpx;

                  &:last-of-type {
                    margin-bottom: 0;
                  }

                  .advice-entrance {
                    display: inline-block;
                    width: 36rpx;
                    height: 36rpx;
                    margin-bottom: -10rpx;
                    box-sizing: border-box;
                  }
                }
              }
            }
          }
        }
        .analysis-card-list {
          height: calc(100vh - 340rpx);
          overflow-y: scroll;
          padding: 12rpx 32rpx 148rpx;
          .title {
            font-size: 30rpx;
            color: #333333;
            .title-spe {
              padding: 0 12rpx;
              font-weight: 600;
            }
          }
          .match-container {
            display: flex;
            align-items: center;
            margin: 16rpx 0 0 0;
            .match-num {
              font-weight: 600;
              font-size: 48rpx;
              font-family: PingFang-SC, PingFang-SC;
              color: #333333;
            }
            .percent-icon {
              font-size: 32rpx;
              margin-right: 20rpx;
              margin-top: 12rpx;
              font-weight: 600;
            }
          }
          .match-tips {
            font-size: 28rpx;
            color: #999999;
            margin: 43rpx 0;
          }
          .card {
            margin-bottom: 24rpx;
            background: linear-gradient(180deg, #ebfcff 0%, #ffffff 100%)
              no-repeat;
            background-size: 100% 90rpx;
            box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(107, 136, 187, 0.3);
            border-radius: 12rpx;
            &:last-child {
              margin-bottom: 0;
            }
            .header {
              padding: 24rpx 16rpx 24rpx 24rpx;
              display: flex;
              justify-content: space-between;
              border-bottom: 1rpx solid #e0e5e7;
              .title {
                font-weight: 800;
                font-size: 32rpx;
                color: #333333;
              }
            }
            .info {
              padding: 40rpx 24rpx 40rpx 24rpx;
              &-item {
                margin-bottom: 28rpx;
                &:last-child {
                  margin-bottom: 0;
                }
                &-header {
                  display: flex;
                  align-items: center;
                  margin-bottom: 12rpx;
                  .round {
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 50%;
                    background: #d8d8d8;
                    margin-right: 24rpx;
                  }
                  .title {
                    font-weight: 800;
                    font-size: 28rpx;
                    color: #333333;
                  }
                }
                &-content {
                  font-family: PingFangSC, PingFang SC;
                  font-size: 28rpx;
                  color: #666666;
                  padding-left: 4rpx;
                }
              }
              &-content {
                font-size: 28rpx;
                color: #666666;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
          .match-text {
            font-size: 22rpx;
            padding: 8rpx 16rpx;
            color: #fff;
            border-radius: 32rpx;
          }
          .danger {
            background: #ff6562;
          }
          .warn {
            background: #ffab00;
          }
          .normal {
            background: #3b94f2;
          }
          .success {
            background: #63c75f;
          }
          .unknown {
            background: #999999;
          }
        }
        .footer {
          position: fixed;
          left: 32rpx;
          bottom: 40rpx;
          width: calc(100vw - 64rpx);
          z-index: 999;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .btn,
          .btn-half {
            color: #fff;
            font-size: 32rpx;
            text-align: center;
            background: #fe7220;
          }
          .btn {
            border-radius: 50rpx;
            width: 100%;
          }
          .btn-half {
            padding: 26rpx 0;
            border-radius: 50rpx;
            width: calc(50% - 12rpx);
          }
          .ml-14 {
            margin-left: 14rpx;
          }
          .active {
            color: #fff;
            background: #28cc75;
          }
        }
        .test-tip {
          // height: calc(100vh - 480rpx);
          display: flex;
          flex-direction: column;
          align-items: center;
          .data-img {
            width: 360rpx;
            height: 360rpx;
            margin-bottom: 24rpx;
          }
          .tip-text {
            font-size: 28rpx;
            color: #888888;
            line-height: 40rpx;
            text-align: center;
            line-height: 50rpx;
            padding: 0 40rpx;
          }
          .mb44 {
            margin-bottom: 44rpx;
          }
          .mt44 {
            margin-top: 44rpx;
          }
          .test-btn {
            width: 328rpx;
            height: 72rpx;
            line-height: 72rpx;
            text-align: center;
            background: #ff711e;
            border-radius: 36rpx;
            color: #fff;
          }
        }
      }
    }
  }
}
.fixedButtons {
  z-index: 999;
  width: calc(100vw - 64rpx);
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 40rpx;
  width: 100vw;
  align-items: center;
  justify-content: center;
  .return-sxh-home {
    width: 680rpx;
    height: 96rpx;
    background: #ff711e;
    border-radius: 200rpx;
    color: #ffffff;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .fixedButtonItem {
    background-color: #ff711e;
    color: white;
    font-size: 36rpx;
    padding: 40rpx 50rpx;
    border-radius: 12rpx;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .disabled {
    background-color: #ffc8a8;
    color: white;
    font-size: 36rpx;
    padding: 40rpx 50rpx;
    border-radius: 12rpx;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .shareWithOthers {
    width: 258rpx;
    height: 34rpx;
    position: fixed;
    bottom: 170rpx;
    left: 50rpx;
  }
  .hat {
    width: 24rpx;
    height: 24rpx;
    position: fixed;
    bottom: 176rpx;
    left: 60rpx;
    // z-index: 1000;
  }
}
@keyframes enterBotFramesSprites {
  100% {
    background-position: -18970px -10px; //第一个参数是网页里的最后一个数字 https://www.toptal.com/developers/css/sprite-generator
  }
}

.animation-image {
  position: absolute;
  /* 或者使用 position: fixed; */
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 375px;
  height: 375px;
  background-image: url($img-base-resume + "/enterBotFramesSprites_test.png");
  /* 雪碧图路径 */
  background-position: -10px -10px;
  background-size: 19355px auto; //图的长度
  background-repeat: no-repeat;
  animation: enterBotFramesSprites 3500ms steps(48) forwards 1; //steps是总图数-1
}

::v-deep .empty {
  margin: 0 auto;

  text {
    color: #999999 !important;
    font-size: 28rpx !important;
  }
}

.resumeAssessmentEntrance {
  position: fixed;
  bottom: 228rpx;
  right: 0rpx;
  display: flex;
  align-items: center;
  // width: 240rpx;
  height: 76rpx;
  padding: 10rpx 14rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 200rpx 0rpx 0rpx 200rpx;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 26rpx;
  color: #555555;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
  z-index: 200;

  // @keyframes templateBotFramesSprites {
  //   0% {
  //     background-position: -10px -10px;
  //   }
  //   12% {
  //     background-position: -806px -10px; //第一个参数是网页里的最后一个数字 https://www.toptal.com/developers/css/sprite-generator
  //   }
  //   86% {
  //     background-position: -806px -10px; //保持静止
  //   }
  //   100% {
  //     background-position: -10px -10px;
  //   }
  // }
  // .botIcon {
  //   width: 44rpx;
  //   height: 44rpx;
  //   border-radius: 50%;
  //   margin-right: 12rpx;
  //   background-image: url($img-base-resume + "/templateBotFramesSprites.png"); /* 雪碧图路径 */
  //   // background-size: 82rpx 82rpx;
  //   background-position: -10px -10px;
  //   background-repeat: no-repeat;
  //   background-size: 840px auto;
  //   animation: templateBotFramesSprites 13s steps(19) forwards infinite;
  // }
  .botIcon {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    margin-right: 12rpx;
    background-image: url($img-base + "/careerPath/consultant_entrance_hot.png");
    /* 雪碧图路径 */
    // background-size: 82rpx 82rpx;
    background-size: 100% 100%;
    // animation: templateBotFramesSprites 13s steps(19) forwards infinite;
  }

  .resumeAssessmentEntranceIcon {
    width: 18rpx;
    height: 18rpx;
    margin-left: 8rpx;
  }
}

@keyframes rightFixedButtonShowup {
  0% {
    right: -300rpx;
  }

  80% {
    right: 20rpx;
  }

  100% {
    right: 0rpx;
  }
}

.rightFixedButton {
  position: fixed;
  bottom: 328rpx;
  right: 0rpx;
  display: flex;
  align-items: center;
  // width: 240rpx;
  height: 76rpx;
  padding: 10rpx 19rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 200rpx 0rpx 0rpx 200rpx;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  font-size: 26rpx;
  color: #555555;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
  z-index: 200;
  animation: rightFixedButtonShowup 0.8s 1 cubic-bezier(0.3, 0, 1, 1);

  // @keyframes templateBotFramesSprites {
  //   0% {
  //     background-position: -10px -10px;
  //   }
  //   12% {
  //     background-position: -806px -10px; //第一个参数是网页里的最后一个数字 https://www.toptal.com/developers/css/sprite-generator
  //   }
  //   86% {
  //     background-position: -806px -10px; //保持静止
  //   }
  //   100% {
  //     background-position: -10px -10px;
  //   }
  // }
  // .botIcon {
  //   width: 44rpx;
  //   height: 44rpx;
  //   border-radius: 50%;
  //   margin-right: 12rpx;
  //   background-image: url($img-base-resume + "/templateBotFramesSprites.png"); /* 雪碧图路径 */
  //   // background-size: 82rpx 82rpx;
  //   background-position: -10px -10px;
  //   background-repeat: no-repeat;
  //   background-size: 840px auto;
  //   animation: templateBotFramesSprites 13s steps(19) forwards infinite;
  // }
  .botIcon {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    margin-right: 12rpx;
    background-image: url($img-base + "/careerPath/consultant_entrance_hot.png");
    /* 雪碧图路径 */
    // background-size: 82rpx 82rpx;
    background-size: 100% 100%;
    // animation: templateBotFramesSprites 13s steps(19) forwards infinite;
  }

  .resumeAssessmentEntranceIcon {
    width: 18rpx;
    height: 18rpx;
    margin-left: 8rpx;
  }
}
</style>
